import 'package:flutter/material.dart';
import 'package:flutter_base/config/app_color.dart';
import 'package:flutter_base/generated/assets.dart';
import 'package:flutter_base/pages/test_detail/model/model_test_detail.dart';
import 'package:flutter_base/pages/test_questions/test_questions_logic.dart';
import 'package:flutter_base/utils/log/utils_log.dart';
import 'package:flutter_base/widgets/image/auto_image.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

//4 排序题

class RankingQuestionWidget extends StatelessWidget {
  // const RankingQuestionWidget({super.key});
  final TestQuestionsLogic logic;

  // final Function() onRankingChanged;
  // final List<int>? selectRanking;

  const RankingQuestionWidget({
    super.key,
    required this.logic,
    // required this.onRankingChanged,
    // required this.selectRanking,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 16.w),
      decoration: BoxDecoration(
        color: const Color(0xFFF5F7F8).withOpacity(0.2),
        borderRadius: BorderRadius.circular(12.w),
      ),
      child: ReorderableListView(
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        proxyDecorator: (child, index, animation) {
          // 拖动时的装饰效果，添加黑色边框
          return AnimatedBuilder(
            animation: animation,
            builder: (BuildContext context, Widget? child) {
              return Container(
                decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.2),
                      blurRadius: 8.w,
                      spreadRadius: 1.w,
                    ),
                  ],
                  border: Border.all(
                    color: Colors.transparent,
                    width: 0,
                  ),
                  borderRadius: BorderRadius.circular(12.w),
                ),
                child: child,
              );
            },
            child: child,
          );
        },
        onReorder: (oldIndex, newIndex) {
          // setState(() {
          // 调整索引（因为移除项后，目标索引可能会变）
          if (newIndex > oldIndex) newIndex--;

          // 重新排序
          final item = logic.currentQuestion?.options?.removeAt(oldIndex);
          if (item != null) {
            logic.currentQuestion?.options?.insert(newIndex, item);
          }

          // clog('dasldjlk    ${item}');
          logic.userAnswers[logic.currentQuestion?.id ?? 0] =
              (logic.currentQuestion?.options ?? []).map((item) {
            return item.id ?? 0;
          }).toList();
          logic.update();
          // 通知父组件排序变化
          // onRankingChanged.call();
          // });
        },
        children: List.generate((logic.currentQuestion?.options ?? []).length,
            (index) {
          // final option = _sortedOptions[index];
          return _buildRankingItem(
              (logic.currentQuestion?.options ?? [])[index], index);
        }),
      ),
    );
  }

  Widget _buildRankingItem(ModelTestDetailQuestionsOptions option, int index) {
    return Container(
      key: ValueKey(option.id ?? index),
      margin: EdgeInsets.only(bottom: 1.w),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12.w),
        border: Border.all(
          color: Colors.transparent,
          width: 1.w,
        ),
      ),
      child: Column(
        children: [
          Container(
            margin: EdgeInsets.only(top: 24.w),
            height: 48.w,
            padding: EdgeInsets.symmetric(horizontal: 12.w),
            child: Row(
              children: [
                // 序号
                Container(
                  width: 24.w,
                  height: 24.w,
                  alignment: Alignment.center,
                  child: Text(
                    '${index + 1}',
                    style: TextStyle(
                      fontSize: 16.sp,
                      fontWeight: FontWeight.w900,
                      color: AppColor.color0C0A09,
                    ),
                  ),
                ),

                SizedBox(width: 12.w),

                // 内容
                Expanded(
                  child: Text(
                    option.content ?? '',
                    style: TextStyle(
                      fontSize: 16.sp,
                      fontWeight: FontWeight.w400,
                      color: AppColor.color0C0A09.withOpacity(0.4),
                    ),
                  ),
                ),

                AutoImage(
                  Assets.testQuestionDragHandle,
                  width: 24.w,
                ),
                // 拖动句柄图标
                // Icon(

                //   Icons.drag_handle,
                //   size: 24.w,
                //   color: const Color(0xFF7F909F),
                // ),
              ],
            ),
          ),
          // 分割线     logic.currentQuestion?.options?.insert(newIndex, item);
          if (index < (logic.currentQuestion?.options ?? []).length - 1)
            Container(
              margin: EdgeInsets.only(left: 12.w),
              height: 1.w,
              color: const Color(0xFFEAEFF2),
            ),
        ],
      ),
    );
  }
}

// class RankingQuestionWidget extends StatefulWidget {
//   final TestQuestionsLogic logic;
//   final Function() onRankingChanged;
//   // final List<int>? selectRanking;
//
//   const RankingQuestionWidget({
//     super.key,
//     required this.logic,
//     required this.onRankingChanged,
//     // required this.selectRanking,
//   });
//
//   @override
//   State<RankingQuestionWidget> createState() => _RankingQuestionWidgetState();
// }
//
// class _RankingQuestionWidgetState extends State<RankingQuestionWidget> {
//   // late List<ModelTestDetailQuestionsOptions> _sortedOptions;
//
//   @override
//   void initState() {
//     super.initState();
//     // _initializeOptions();
//   }
//   //
//   // @override
//   // void didUpdateWidget(RankingQuestionWidget oldWidget) {
//   //   super.didUpdateWidget(oldWidget);
//   //   _initializeOptions();
//   // }
//
//   // void _initializeOptions() {
//   //   // 复制选项列表以避免修改原始数据
//   //   // _sortedOptions = List<ModelTestDetailQuestionsOptions>.from(widget.options);
//   //
//   //   // // 如果提供了初始排序，则按照初始排序重新排列选项
//   //   // if (widget.initialRanking != null && widget.initialRanking!.isNotEmpty) {
//   //   //   final Map<int, ModelTestDetailQuestionsOptions> optionsMap = {};
//   //   //   for (var option in _sortedOptions) {
//   //   //     if (option.id != null) {
//   //   //       optionsMap[option.id!] = option;
//   //   //     }
//   //   //   }
//   //   //
//   //   //   final List<ModelTestDetailQuestionsOptions> reorderedOptions = [];
//   //   //   for (var id in widget.initialRanking!) {
//   //   //     if (optionsMap.containsKey(id)) {
//   //   //       reorderedOptions.add(optionsMap[id]!);
//   //   //     }
//   //   //   }
//   //   //
//   //   //   // 添加任何未在initialRanking中的选项
//   //   //   for (var option in widget.options) {
//   //   //     if (option.id != null && !widget.initialRanking!.contains(option.id)) {
//   //   //       reorderedOptions.add(option);
//   //   //     }
//   //   //   }
//   //   //
//   //   //   if (reorderedOptions.isNotEmpty) {
//   //   //     _sortedOptions = reorderedOptions;
//   //   //   }
//   //   // }
//   // }
//   //
//   // // 获取当前排序的选项ID列表
//   // List<int> _getCurrentRanking() {
//   //   return _sortedOptions
//   //       .where((option) => option.id != null)
//   //       .map((option) => option.id!)
//   //       .toList();
//   // }
//
//   @override
//   Widget build(BuildContext context) {
//     return Container(
//       margin: EdgeInsets.symmetric(vertical: 16.w),
//       decoration: BoxDecoration(
//         color: const Color(0xFFF5F7F8).withOpacity(0.2),
//         borderRadius: BorderRadius.circular(12.w),
//       ),
//       child: ReorderableListView(
//         shrinkWrap: true,
//         physics: const NeverScrollableScrollPhysics(),
//         proxyDecorator: (child, index, animation) {
//           // 拖动时的装饰效果，添加黑色边框
//           return AnimatedBuilder(
//             animation: animation,
//             builder: (BuildContext context, Widget? child) {
//               return Container(
//                 decoration: BoxDecoration(
//                   boxShadow: [
//                     BoxShadow(
//                       color: Colors.black.withOpacity(0.2),
//                       blurRadius: 8.w,
//                       spreadRadius: 1.w,
//                     ),
//                   ],
//                   border: Border.all(
//                     color: Colors.transparent,
//                     width: 0,
//                   ),
//                   borderRadius: BorderRadius.circular(12.w),
//                 ),
//                 child: child,
//               );
//             },
//             child: child,
//           );
//         },
//         onReorder: (oldIndex, newIndex) {
//           setState(() {
//             // 调整索引（因为移除项后，目标索引可能会变）
//             if (newIndex > oldIndex) newIndex--;
//
//             // 重新排序
//             final item = _sortedOptions.removeAt(oldIndex);
//             _sortedOptions.insert(newIndex, item);
//
//             // 通知父组件排序变化
//             widget.onRankingChanged.call();
//           });
//         },
//         children: List.generate(_sortedOptions.length, (index) {
//           final option = _sortedOptions[index];
//           return _buildRankingItem(option, index);
//         }),
//       ),
//     );
//   }
//
//   Widget _buildRankingItem(ModelTestDetailQuestionsOptions option, int index) {
//     return Container(
//       key: ValueKey(option.id ?? index),
//       margin: EdgeInsets.only(bottom: 1.w),
//       decoration: BoxDecoration(
//         color: Colors.white,
//         borderRadius: BorderRadius.circular(12.w),
//         border: Border.all(
//           color: Colors.transparent,
//           width: 1.w,
//         ),
//       ),
//       child: Column(
//         children: [
//           Container(
//             margin: EdgeInsets.only(top: 24.w),
//             height: 48.w,
//             padding: EdgeInsets.symmetric(horizontal: 12.w),
//             child: Row(
//               children: [
//                 // 序号
//                 Container(
//                   width: 24.w,
//                   height: 24.w,
//                   alignment: Alignment.center,
//                   child: Text(
//                     '${index + 1}',
//                     style: TextStyle(
//                       fontSize: 16.sp,
//                       fontWeight: FontWeight.w900,
//                       color: AppColor.color0C0A09,
//                     ),
//                   ),
//                 ),
//
//                 SizedBox(width: 12.w),
//
//                 // 内容
//                 Expanded(
//                   child: Text(
//                     option.content ?? '',
//                     style: TextStyle(
//                       fontSize: 16.sp,
//                       fontWeight: FontWeight.w400,
//                       color: AppColor.color0C0A09.withOpacity(0.4),
//                     ),
//                   ),
//                 ),
//
//                 AutoImage(
//                   Assets.testQuestionDragHandle,
//                   width: 24.w,
//                 ),
//                 // 拖动句柄图标
//                 // Icon(
//
//                 //   Icons.drag_handle,
//                 //   size: 24.w,
//                 //   color: const Color(0xFF7F909F),
//                 // ),
//               ],
//             ),
//           ),
//           // 分割线
//           if (index < widget.options.length - 1)
//             Container(
//               margin: EdgeInsets.only(left: 12.w),
//               height: 1.w,
//               color: const Color(0xFFEAEFF2),
//             ),
//         ],
//       ),
//     );
//   }
// }
